<template>
  <div @click="test2(classTest)">
    <el-collapse-item :title="title" :name="name">
      <el-row>
        <el-button>默认颜色</el-button>
        <el-button type="primary">主要颜色</el-button>
        <el-button type="success">成功颜色</el-button>
      </el-row>
      <el-row>
        <el-button type="info">信息颜色</el-button>
        <el-button   type="warning">警告颜色</el-button>
        <el-button type="danger">危险颜色</el-button>
      </el-row>
    </el-collapse-item>
  </div>
</template>

<script>
import {toggleClass} from "@/unit";

export default {
  name: "ColorSelect",
  props:['title','name','classTest'],
  data(){
    return{
      classH2:'custom-000'
    }
  },
  methods:{
    test2:function (color){
      this.themecolor = color
    }
  },
  mounted () {
    toggleClass(document.body, 'custom-' + this.themecolor);
    let curcolor = this.store1.state.themecolor;
    this.classH2 = 'custome-' + curcolor;
  },
  computed: {
    themecolor: {
      get () {
        return this.store1.state.themecolor;
      },
      set (val) {
        this.store1.commit('setThemeColor', val)
      }
    }
  },
  watch: {
    themecolor: {
      handler () {
        toggleClass(document.body, 'custom-' + this.themecolor);
      }
    }
  }
}
</script>

<style scoped>

</style>
